<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <link rel="style/sheet" href="../css/reset.css">
    <style>
        .box1{
            width:500px;
            height:500px;
            /*
            background-color设置背景颜色
            background-image背景图片
            如果背景图片小于元素，则背景图片会自动在元素中平铺，将元素撑满
            如果背景图片大于元素，则一部分背景图片无法显示
            如果背景图片和元素一样大，则会直接正常显示*/
            background-color:chartreuse;
            background-image: url("./background_picture/1.jpg");
            /*background-repea设置背景的重复方式
            可选值：repeat默认值，背景会沿着x轴,y轴双方向重复； 
            repeat-x沿着x轴方向重复; repeat-y沿着y轴方向重复;  no-repeat背景图片不重复
            */
            background-repeat: no-repeat;
            /*background-position设置背景图片的位置
            可选值：center top bottom left right几个表示方位的词来设置背景图片的位置
            使用方位词时，必须同时指定两个值，如果只写一个则默认center
            通过偏移量来指定背景图片的位置，水平方向的偏移量 垂直方向的偏移量*/
            background-position:100px 100px;
            /*设置背景范围 background-clip
            可选值：border-box默认值，背景会出现在边框的下边；padding-box背景不会出现在边框，只出现在内容区和内边框
            content-box出现在内容区*/
            background-clip: border-box;
            /*background-origin背景图片的偏移量的计算原点
            可选值：padding-box默认值从内边距处开始计算 content-box背景图片的偏移量从内容区处计算  
            border-box背景图片的偏移量从边框处开始计算*/
            background-origin: padding-box;
            border:10px red dashed;
            background-size: 100px;
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    
</body>
</html>